<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../publics/jstl.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="${ctx}/resource/static/css/common.css" rel="stylesheet">
  <title>车辆列表</title>
  <script>
    var jsCtx = '${ctx}';
  </script>
</head>
<body class="car">

  <div class="car-lst-bar">
    <div class="car-bar-store">
      <div class="text-ellipse">${startShopName}</div>
      <div class="sel-pubdate text-ellipse">${startDate}</div>
    </div>
    <div class="car-store-sp">
      <span>${days}天</span>
    </div>
    <div class="car-bar-store">
      <div class="text-ellipse">${endShopName}</div>
      <div class="sel-pubdate text-ellipse">${endDate}</div>
    </div>
  </div>
  <div class="car-lst">
    <c:forEach items="${carList}" var="car">
    <c:if test="${car.carNum < 1}">
    <div class="mask"></div>
    </c:if>
    <div class="car-item flex"
         data-id="${car.id}"
         data-name="${car.name}"
         data-type="${car.description}"
         data-viewurl="${car.viewUrl}"
         data-cover="${baseFileUrl}${car.picUrl}"
         data-price='[<c:forEach items="${car.prices}" var="price" varStatus="status">${status.first ? "" : ","}{"title": "${price.priceDesc}", "price": ${price.price}, "disabled": false}</c:forEach>]'
         >
        <div class="car-item-cover flex-none">
          <img src="${baseFileUrl}${car.picUrl}">
        </div>
        <div class="car-item-hd flex-auto">
          <div class="car-item-name"><a href="${car.viewUrl}">${car.name}</a></div>
          <div class="car-item-type">${car.description}</div>
        </div>
        <div class="car-item-info flex-none">
          <div class="car-item-aver">日均价</div>
          <div class="car-item-price">最低￥<span>${car.prices[0].topVipRate != null ? (car.prices[0].topVipRate * car.prices[0].price) : car.prices[0].price}</span>起</div>
        </div>
        <div class="car-item-arrow flex-none iconfont icon-gengduo"></div>
    </div>
    </c:forEach>
  </div>

  <!-- 数据处理区 -->
  <input id="startCityId" value="${startCityId}" type="hidden" />
  <input id="startCityName" value="${startCityName}" type="hidden" />
  <input id="startShopId" value="${startShopId}" type="hidden" />
  <input id="startShopName" value="${startShopName}" type="hidden" />
  <input id="startDate" value="${startDate}" type="hidden" />
  <input id="endCityId" value="${endCityId}" type="hidden" />
  <input id="endCityName" value="${endCityName}" type="hidden" />
  <input id="endShopId" value="${endShopId}" type="hidden" />
  <input id="endShopName" value="${endShopName}" type="hidden" />
  <input id="endDate" value="${endDate}" type="hidden" />
  <input id="days" value="${days}" type="hidden" />
  <div id="jumpForms" style="display: none;"></div>
  <!-- 数据处理区 -->

  <script src="${ctx}/resource/static/js/jquery.min.js"></script>
  <script src="${ctx}/resource/static/js/fastclick.js"></script>
  <script src="${ctx}/resource/static/js/user.js?v=5"></script>
  <script>
    $(function(){
      $('.car-lst-bar').click(function(){
        window.location.href = '${ctx}/h5/home/index';
      });

      $('.car-item').click(function(){
        var form = '<form id="jumpForm" name="jumpForm" action="'+jsCtx+'/h5/home/order" method="post">' +
                '<input name="startCityId" type="hidden" value="' + $('#startCityId').val() + '" />' +
                '<input name="startCityName" type="hidden" value="' + $('#startCityName').val() + '" />' +
                '<input name="startShopId" type="hidden" value="' + $('#startShopId').val() + '" />' +
                '<input name="startShopName" type="hidden" value="' + $('#startShopName').val() + '" />' +
                '<input name="startDate" type="hidden" value="' + $('#startDate').val() + '" />' +
                '<input name="endCityId" type="hidden" value="' + $('#endCityId').val() + '" />' +
                '<input name="endCityName" type="hidden" value="' + $('#endCityName').val() + '" />' +
                '<input name="endShopId" type="hidden" value="' + $('#endShopId').val() + '" />' +
                '<input name="endShopName" type="hidden" value="' + $('#endShopName').val() + '" />' +
                '<input name="endDate" type="hidden" value="' + $('#endDate').val() + '" />' +
                '<input name="days" type="hidden" value="' + $('#days').val() + '" />' +
                '<input name="price" type="hidden" value="' + $(this).data('price') + '" />' +
                '<input name="carId" type="hidden" value="' + $(this).data('id') + '" />' +
                '<input name="carName" type="hidden" value="' + $(this).data('name') + '" />' +
                '<input name="carDescription" type="hidden" value="' + $(this).data('type') + '" />' +
                '<input name="picUrl" type="hidden" value="' + $(this).data('cover') + '" />' +
                '</form>'
        $('#jumpForms').html(form);
        $('#jumpForm').submit();
      });

    })
  </script>
</body>
</html>